{% extends "_layout.html" %}
{% import "component/statistics.njk" as statistics %}

{# 样式代码 #}
{% block style %}
<style type="text/css">
    body,.mui-content{background-color: #fff;}
    .mui-content-padded{ accelerator: 10px; padding-top: 60px; margin: 30px;}
    .mui-content-padded h3{ width: 100%; text-align: center;margin-bottom: 20px; font-size: 22px; font-weight: normal;}
    .mui-input-row.mui-input-range{ padding-right: 0;}
    .mui-input-range input[type=range]{height: 4px; background-color: #e0e0e0;}
</style>
<title>预警周期设置</title>
{% endblock %}

{# bodyd代码#}
{% block body %}
<div class="mui-content">
    <div class="mui-content-padded">
        <h3>拖动圆点设置预警天数</h3>
        <div class="mui-input-row mui-input-range">
            <input type="range" id='block-range' value="9" min="7" max="15" >
            <span class="roud-min">7天</span>
            <span class="roud-max">15天</span>
        </div>
        <div class="roud-intr">
            基于系统统计今日之前<span id='block-range-val'>9</span>天平均值，作业错题率出现较大波动时系统自动发送预警
        </div>
        <input class="setting-btn" type="submit" value="保存设置" />
    </div>
</div>
{% endblock %}

{#js代码#}
{% block js %}
<script type="text/javascript" charset="utf-8">
    mui.init({
        swipeBack:true //启用右滑关闭功能
    });
    //监听input事件，获取range的value值，也可以直接element.value获取该range的值
    var rangeList = document.querySelectorAll('input[type="range"]');
    for(var i=0,len=rangeList.length;i<len;i++){
        rangeList[i].addEventListener('input',function(){
            if(this.id.indexOf('field')>=0){
                document.getElementById(this.id+'-input').value = this.value;
            }else{
                document.getElementById(this.id+'-val').innerHTML = this.value;
            }

        });
    }
</script>
<!--flotdemo-->
{% endblock %}
